<template>
  <el-form :ref="form" :model="form" label-width="80px">
    <!-- 文本输入框 -->
    <el-form-item
      v-if="formtype == 'input'"
      prop = 'model'
      :label="label"
      :rules="rules"
    >
      <el-input v-model='form.model'></el-input>
    </el-form-item>
    <!-- 文本输入框组 -->
    <el-form-item
      v-if="formtype == 'inputgroup'"
      prop = 'form'
      :label="label"
      :rules="rules"
    >
      <el-col :span="8">
        <el-input v-model='form.model[0]'></el-input>
      </el-col>
      <el-col :span="4"><center>至</center></el-col>
      <el-col :span="8">
        <el-input v-model='form.model[1]'></el-input>
      </el-col>
    </el-form-item>

    <!-- 单选框 -->
    <el-form-item
      v-if="formtype == 'radio'"
      :label="label"
      :rules="rules"
    >
      <el-radio-group v-model="form.model">
        <el-radio :disabled="radioItem.disabled" :label="radioItem.val" v-for="radioItem in data.option">{{radioItem.label}}</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 多选框 -->
    <el-form-item
      v-if="formtype == 'checkbox'"
      :label="label"

      :rules="rules"
    >
      <el-checkbox-group v-model="form.model">
        <el-checkbox
          v-for="checkboxItem in data.option"
          :label="checkboxItem.val"
        >
          {{checkboxItem.label}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 下拉框 -->
    <el-form-item
      v-if="formtype == 'select'"
      :label="label"
      :rules="rules"

    >
      <el-select
        v-model="form.model"
        :multiple='data.multiple'
        :disabled='data.disabled == true'
      >
        <el-option
          v-for="selectItem in data.option"
          :label="selectItem.label"
          :value="selectItem.val"
        ></el-option>
      </el-select>
    </el-form-item>

    <!-- 时间选择框 -->
    <el-form-item
      v-if="formtype == 'datePicker'"
      :label="label"
      :rules="rules"
    >
      <el-date-picker
        :disabledDate = 'data.disabled'
        type="date"
        placeholder="选择日期"
        v-model="form.model"
        :format ='data.format'
      ></el-date-picker>
    </el-form-item>

    <!-- 时间选择组 -->
    <el-form-item
      v-if="formtype == 'datePickerGroup'"
      :label="label"
      :rules="rules"
    >
      <el-date-picker
        :disabledDate = 'data.disabled'
        type="datetimerange"
        placeholder="选择日期"
        v-model="form.model"
        :format ='data.format'
      ></el-date-picker>
    </el-form-item>

    <!-- 上传图片组件 -->
    <el-form-item
      v-if="formtype == 'upload'"
    >
      <el-upload
        action="http://test.mall.admin.plateno.com:9666/mall-admin-web/file/uploadImages.do"
        type="drag"
        name='images'
        :multiple="true"
        :on-success = 'handleSuccess'
      >
        <i class="el-icon-upload"></i>
        <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>
      <!-- 上传文件组件 -->
<script>
  export default {
    props: ['data'],
    created () {
      this.rules = this.data.rules || []
      this.label = this.data.label || ''
      this.form.model = this.data.defaultVal || ''
      this.formtype = this.data.formtype || 'input'
      // 下拉框判断
      if (this.formtype === 'select') {
        if (Array.isArray(this.data.defaultVal)) {
          if (this.data.multiple) {
            this.form.model = this.data.defaultVal
          } else {
            this.form.model = this.data.defaultVal[0]
          }
        }
      }
      //  上传框判断操作
      if (this.formtype === 'upload') {
        if (!Array.isArray(this.data.defaultVal)) {
          this.form.model = []
        }
      }
      if (this.formtype === 'inputgroup') {
        let startDefaultVal = this.data.defaultVal[0] || ''
        let endDefaultVal = this.data.defaultVal[1] || ''
        this.form.model = []
        this.form.model[0] = startDefaultVal
        this.form.model[1] = endDefaultVal
      }
    },
    data () {
      return {
        type: '',
        rules: [],
        label: '',
        form: {
          model: '',
          start: '',
          end: ''
        }
      }
    },
    methods: {
      handleSuccess (response, file, fileList) {
        this.form.model = fileList
      },
      updataData () {

      }
    },
    watch: {
      // 提供forminput事件
      'form.model': function (val) {
        if (this.formtype === 'datePickerGroup') {
          let sid = this.data.id[0]
          let eid = this.data.id[1]
          this.$emit('forminput', {
            [sid]: new Date(val[0]).getTime() || '',
            [eid]: new Date(val[1]).getTime() || ''
          })
        } else if (this.formtype === 'inputgroup') {
          let startId = this.data.id[0]
          let endId = this.data.id[1]
          this.$emit('forminput', {
            [startId]: val[0],
            [endId]: val[1]
          })
        } else {
          this.$emit('forminput', {
            [this.data.id]: val
          })
        }
      }
    }
  }
</script>
